<template>
<div>
  <div class="examInfo" v-if="$store.state.studentInfomation">
    <!-- currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      height="500"
      border
      style="width: 100%"
    >
      <el-table-column prop="e_name" label="考试名称"> </el-table-column>

      <el-table-column prop="start_time" label="开始时间"> 
        <template slot-scope="scope">
         {{moment(scope.row.start_time).format('YYYY年MM月DD日 HH:mm')}}
        </template>
      </el-table-column>

      <el-table-column prop="end_time" label="结束时间">
        <template slot-scope="scope">
         {{moment(scope.row.end_time).format('YYYY年MM月DD日 HH:mm')}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">

            <el-button  v-if="new Date() - new Date(scope.row.start_time) >= 0 && new Date() <new Date(scope.row.end_time) && eid.indexOf(scope.row.eid)==-1"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >可考试</el-button>

            <el-button v-else-if="new Date() -new Date(scope.row.end_time)>0 && eid.indexOf(scope.row.eid)==-1"
            type="danger"
            disabled
            @click="handleEdit(scope.$index, scope.row)"
            >已结束</el-button>

            <!-- 使用方案二时需把除未开始其它按钮删除 -->
            <!-- <el-button
            type="primary"
            :ref="`button${scope.row.eid}`"
            :id="`button${scope.row.eid}`"
            disabled
            @click="handleEdit(scope.$index, scope.row)"
            >未开始</el-button> -->

            <el-button v-if="new Date() -new Date(scope.row.start_time)<0 && eid.indexOf(scope.row.eid)==-1"
            type="primary"
            disabled
            @click="handleEdit(scope.$index, scope.row)"
            >未开始</el-button>


            <el-button v-show="eid.indexOf(scope.row.eid)!=-1" 
            type="success"
            disabled
            @click="handleEdit(scope.$index, scope.row)"
            >已考试</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>

  <div v-else>请前往个人中心完善信息<router-link to="/studentHome/homepage">点击前往</router-link></div>
  </div>
</template>
<script>
import axios from "axios";
import { Message, MessageBox } from "element-ui";
export default {
  props: ["studentinfomation"],
  data() {
    return {
      tableData: [],
      eid:[],//用来判断是否有考试
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
    };
  },
  mounted() {
    //展示数据
    axios
      .get("/v1/students/examinfo")
      .then((result) => {
        // console.log(result.data);
        if (result.data.status == 200) {
          this.tableData = result.data.data;

          /*//因为无法直接获取dom元素，下次dom渲染时执行的函数 方案二获取dom改变按钮
          this.$nextTick(function () {
            for (let a = 0; a < this.tableData.length; a++) {
              // console.log(document.querySelector(`#button${eid}`));
              // console.log(this.$refs[`button${eid}`]);
              //改变按钮
              let new_date = new Date(); //当前时间
              let stime = new Date(this.tableData[a].start_time); //开始时间
              let etime = new Date(this.tableData[a].end_time); //结束时间
              let eid = this.tableData[a].eid;
              if (new_date - stime >= 0 && new_date < etime) {
                //当前时间-开始时间>0表示当前时间已经过了开始时间了并且小于结束时间
               
                this.$refs[`button${eid}`].$el.classList.remove("is-disabled");
                // 真正的问题似乎是您正在尝试通过setAttribute()将disabled设置为false，
                // 而这并没有达到您的期望。 如果设置了disabled属性，则元素将被禁用，而与它的值无关
                // （因此disabled="true"、disabled="disabled"和disabled="false"都执行相同的操作：
                // 元素被禁用）。 您应该删除complete属性：
                this.$refs[`button${eid}`].$el.removeAttribute("disabled");
                this.$refs[`button${eid}`].$el.innerHTML = "可考试";
              } else if (new_date - etime >= 0) {
                
                this.$refs[`button${eid}`].$el.innerHTML = "已结束";
              }

          });*/

          //下次dom渲染时执行的函数
          //判断是否考试
          axios
            .get("/v1/students/studentexaminfo")
            .then((result) => {
              this.studentexaminfo = result.data.data;
              // console.log(this.studentexaminfo);
              if (this.studentexaminfo != undefined) {
                this.$nextTick(function () {
                  let eid = []
                  for (let aa = 0; aa < this.studentexaminfo.length; aa++) {
                    eid.push(this.studentexaminfo[aa].eid);
                  }
                  this.eid=eid
                  /*
                  for (let aa = 0; aa < this.studentexaminfo.length; aa++) {
                    let eid = this.studentexaminfo[aa].eid;
                    console.log(this.$refs[`button${eid}`]);
                    this.$refs[`button${eid}`].$el.innerHTML = "已考试";
                    this.$refs[`button${eid}`].$el.classList.add("is-disabled");
                    this.$refs[`button${eid}`].$el.setAttribute(
                      "disabled",
                      true
                    );
                  }*/
                  
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });

        }else if(this.$store.state.studentInfomation){
          MessageBox(
            "你所在班级暂无考试，请联系老师",
            "提示",
            {
              confirmButtonText: "确定",
              type: "error",
            }
          );
        } 
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    //当选择每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1; //从第一页开始显示
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    //点击按钮
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(row.eid);
      this.$router.push(`/studentHome/myExam/${row.eid}`);
    },
  },
};
</script>
<style lang="scss">
.examInfo {
  margin: 0 auto;
  margin-top: 50px;
}
</style>